<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>我的生活</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style type="text/css">.infinite-scroll-preloader {margin-top:-20px;}</style>
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
    <script type="text/javascript" src="../js/utils.js"></script>


</head>
<body>
    <div class="page-group">
        <div class="page page-current">
            <header class="bar bar-nav">
     <!--            <a href="" class="button button-link button-nav pull-left back">
                    <span class="icon icon-left"></span>
                    返回
                </a> -->
                <h1 class="title" style="background:rgba(57,117,157,1);color:white">电子书</h1>
            </header>
            <div class="content infinite-scroll infinite-scroll-bottom" data-distance="100">
                <div class="card">
                    <div class="list-block media-list">
                        <ul id="list" class="list-container">
                       
                        </ul>
                    </div>
                </div>
                <!-- 加载提示符 -->
                <div class="infinite-scroll-preloader">
                    <div class="preloader"></div>
                </div>
            </div>
        </div>
    </div>

<script type="text/javascript">
    $(function() {
        $(document).on("pageInit", ".infinite-scroll", function(e, id, page) {

            var loading = false;
            // 最多可加载的条目
            var maxItems = 100;

            // 每次加载添加多少条目
            var itemsPerLoad = 7;


            function addItems(number, lastIndex) {
                // 生成新条目的HTML
                AjaxIO.post("/getEbookJson", {
                    loginId: "admin",
                    password: "666666",
                }, function(results) {

                    var html = '';
                    for (var i = lastIndex + 1; i <= lastIndex + number; i++) {
                        html += '<li class="item-content"><div class="item-media"><img width="60" height="80" src=' + results[i].data.imageUrl + '></div><div class="item-inner"><div class="item-title" style="font-size:1em;;margin-top:0;">' + results[i].data.bookName + '</div><div class="item-subtitle" style="font-size:0.7em;color:orange;">' + results[i].data.review + '</div><div class="item-subtitle" style="font-size:0.7em;margin-top:10px">' + results[i].data.reading + '</div></div></li>';
                    }

                    // 添加新条目
                    $('.infinite-scroll-bottom .list-container').append(html);

                });

            }
            //预先加载20条
            addItems(itemsPerLoad, 0);

            // 上次加载的序号

            var lastIndex = 7;

            // 注册'infinite'事件处理函数
            $(document).on('infinite', '.infinite-scroll-bottom', function() {

                // 如果正在加载，则退出
                if (loading) return;

                // 设置flag
                loading = true;

                // 模拟1s的加载过程
                setTimeout(function() {
                    // 重置加载flag
                    loading = false;

                    if (lastIndex >= maxItems) {
                        // 加载完毕，则注销无限加载事件，以防不必要的加载
                        $.detachInfiniteScroll($('.infinite-scroll'));
                        // 删除加载提示符
                        $('.infinite-scroll-preloader').remove();
                        return;
                    }

                    // 添加新条目
                    addItems(itemsPerLoad, lastIndex);
                    // 更新最后加载的序号
                    lastIndex = $('.list-container li').length;
                    //容器发生改变,如果是js滚动，需要刷新滚动
                    $.refreshScroller();
                }, 1000);
            });
        })
    })
</script>
<script>$.init();</script>

<!-- <script type="text/javascript">
    $(function() {
        'use strict';

        //无限滚动
        $(document).on("pageInit", "#page-infinite-scroll-bottom", function(e, id, page) {
            var loading = false;
            // 每次加载添加多少条目
            var itemsPerLoad = 7;
            // 最多可加载的条目
            var maxItems = 100;
            var lastIndex = $('.list-container li').length;

            function addItems(number, lastIndex) {
              // 生成新条目的HTML
              AjaxIO.post("/getEbookJson" ,{loginId: "admin", password: "666666"},function (results) {
                
                var html = '';
                for (var i = lastIndex + 1; i <= lastIndex + number; i++) {
                    html += '<li class="item-content"><div class="item-media"><img width="60" height="80" src='+results[i].data.imageUrl+'></div><div class="item-inner"><div class="item-title" style="font-size:1em;;margin-top:0;">'+results[i].data.bookName+'</div><div class="item-subtitle" style="font-size:0.7em;color:orange;">'+results[i].data.review+'</div><div class="item-subtitle" style="font-size:0.7em;margin-top:10px">'+results[i].data.reading+'</div></div></li>';
                }

                // 添加新条目
                $('.infinite-scroll-bottom .list-container').append(html);      

            });   

          }
            $(page).on('infinite', function() {
                // 如果正在加载，则退出
                if (loading) return;
                // 设置flag
                loading = true;
                // 模拟1s的加载过程
                setTimeout(function() {
                    // 重置加载flag
                    loading = false;
                    if (lastIndex >= maxItems) {
                        // 加载完毕，则注销无限加载事件，以防不必要的加载
                        $.detachInfiniteScroll($('.infinite-scroll'));
                        // 删除加载提示符
                        $('.infinite-scroll-preloader').remove();
                        return;
                    }
                    addItems(itemsPerLoad, lastIndex);
                    // 更新最后加载的序号
                    lastIndex = $('.list-container li').length;
                    $.refreshScroller();
                }, 1000);
            });
        });
    })
</script> -->
</body>
</html>
